import React, { PureComponent } from 'react'
import { connect } from "react-redux"
import { subNumberAction, addNumberAction } from '../store/actionCreators'

export class About extends PureComponent {

  calcNumber(num, isAdd){
    if (isAdd) {
      this.props.addNumber(num)
    }else{
      this.props.subNumber(num)
    }
  }

  render() {
    const { counter, banner } = this.props
    return (
      <div>
        <h2>这是about页面 counter: {counter}</h2>
        <div>
          <button onClick={e => this.calcNumber(6, true)}>+6</button>
          <button onClick={e => this.calcNumber(6, false)}>-6</button>
        </div> 
        {
          banner.map((item)=> {
            return (
              <p>{item.title}</p>
            )
          })
        }
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter,
  banner: state.banner
})

const mapDispatchToProps = (dispatch) => ({
  addNumber: (num) => dispatch(addNumberAction(num)),
  subNumber(num) {
    dispatch(subNumberAction(num))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(About)